<template>
<!--
  在谷歌浏览器可以下vue.js Devtools 可以查看vue的内容
  -->
   <div>
      <home-header :city="city"></home-header>
      <home-swiper :swiperList = "swiperList"></home-swiper>
      <home-icons :iconList ="iconList"></home-icons>
      <home-recommend :recommendList = "recommendList"></home-recommend>
      <home-weekend :weekendList = "weekendList"></home-weekend>
      </div>
</template>

<script>
import HomeHeader from "./components/header";
import homeSwiper from "./components/swiper";
import homeIcons from "./components/icons";
import homeRecommend from "./components/recommend";
import homeWeekend from "./components/weekend";
import axios from "axios";
import { mapState } from "vuex";
export default {
  name: "home",
  components: {
    HomeHeader,
    homeSwiper,
    homeIcons,
    homeRecommend,
    homeWeekend
  },
  data() {
    return {
      swiperList: [],
      iconList: [],
      weekendList: [],
      recommendList: [],
      lastCity: ""
    };
  },
  methods: {
    getHomeInfo() {
      /**
       * @return {Object} 返回一个对象数据
       * 因为我们是模拟数据。 我们不想把数据放在线上
       * 所以在.gitgnore 里面写static/mock.这样的话。 我们的模拟数据mockJSON就不会提交到GIT上了
       * 因为我们请求api的时候，会写/static/mock/index.json.但是我们上线的话，这样写的写法不好。
       * 所以我们需要在上线前改变诚/api/index.json
       * 所以需要把api的路径，转化为本地的static中，mock数据下的东西
       * vue提供了 一个proxy的代理功能
       * 在config/index.js/proxyTable的配置项进行配置
       * 是webpack-dev-server这个提供的
       *  proxyTable: {
          '/api':{
            target:'http://localhost:1023',
            pathRewrite:{
              '^/api':'/static/mock'
            }
           }
    },
       */
      axios.get("/api/index.json?city=" + this.city).then(this.getHomeInfoSucc);
    },
    getHomeInfoSucc(res) {
      res = res.data;
      if (res.ret && res.data) {
        const data = res.data;
        this.swiperList = data.swiperList;
        this.iconList = data.iconList;
        this.recommendList = data.recommendList;
        this.weekendList = data.weekendList;
      }
      // console.log(res);
    }
  },
  computed: {
    ...mapState(["city"])
  },
  mounted() {
    this.lastCity = this.city;
    this.getHomeInfo();
  },
  //用了Keepalive之后的缓存标签。 在又多了一个activated的生命周期。 可以在此生命周期进行操作 ---性能优化
  // 生命周期的执行循序 先mounted 再 activated
  // 想刷新的时候解决方法。 可以定义一个变量来控制。 lastCity. 在mounted 赋值。 然后在activated里面和state中的city比较。 如果不等于的话。 重新赋值给lastCity.然后重新请求数据

  activated() {
    if (this.lastCity !== this.city) {
      this.lastCity = this.city;
      this.getHomeInfo();
    }
  }
};
</script>



